CSS Font Face: Egendefinerte skrifttyper og optimaliseringsstrategier for globalt webdesign

Typografi spiller en kritisk rolle i webdesign, da det former brukeropplevelsen og formidler merkevarens identitet. @font-face-regelen i CSS gir utviklere muligheten til å bygge inn egendefinerte skrifttyper direkte på nettsidene sine, noe som gir større kontroll over den visuelle presentasjonen av tekst og muliggjør en mer unik og engasjerende brukeropplevelse. Men feil implementering kan føre til ytelsesproblemer, som påvirker innlastingstiden til nettstedet og har en negativ effekt på brukertilfredsheten, spesielt for brukere i regioner med tregere internettforbindelser.

Denne omfattende guiden utforsker detaljene i @font-face, og dekker beste praksis for lasting av egendefinerte skrifttyper og optimaliseringsstrategier for å sikre en sømløs og effektiv opplevelse for et globalt publikum. Vi vil dykke ned i ulike fontformater, optimaliseringsteknikker og avanserte funksjoner for å hjelpe deg med å mestre kunsten webtypografi.

Forstå @font-face-regelen

@font-face-regelen er en kraftig CSS at-regel som lar deg spesifisere egendefinerte skrifttypefiler som skal lastes ned og brukes på nettstedet ditt. Den bygger i hovedsak bro mellom det begrensede settet med systemfonter og den enorme verdenen av egendefinert typografi.

Her er den grunnleggende syntaksen:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

La oss bryte ned komponentene:

• font-family: Denne egenskapen definerer navnet du vil bruke for å referere til den egendefinerte skrifttypen i CSS-reglene dine. Velg et beskrivende og unikt navn.
• src: Denne egenskapen spesifiserer plasseringen til skrifttypefilene. Du kan oppgi flere kilder, slik at nettleseren kan velge det optimale formatet basert på sine evner. format()-funksjonen angir fontformatet for hver fil.
• font-weight: Denne egenskapen definerer vekten (tykkelsen) til skrifttypen. Vanlige verdier inkluderer normal, bold, lighter, bolder, og numeriske verdier som 100, 400, 700, osv.
• font-style: Denne egenskapen definerer stilen til skrifttypen (f.eks. normal, italic, oblique).

Når den er definert, kan du bruke den egendefinerte skrifttypen i CSS-reglene dine slik:

            body {
  font-family: 'MyCustomFont', sans-serif;
}
            

              
                Copy
              
            
          

Dette vil bruke 'MyCustomFont' på hele body-elementet på nettstedet ditt. sans-serif er en reservefont som vil bli brukt hvis den egendefinerte fonten ikke klarer å laste.

Velge de riktige fontformatene: Et globalt perspektiv

Ulike nettlesere støtter forskjellige fontformater. For å sikre bred kompatibilitet er det avgjørende å tilby skrifttypene dine i flere formater. Her er en oversikt over vanlige fontformater og deres nettleserstøtte:

• WOFF2 (Web Open Font Format 2): Det mest moderne og anbefalte formatet, som tilbyr overlegen komprimering og ytelse. Støttes av alle moderne nettlesere.
• WOFF (Web Open Font Format): Et bredt støttet format som tilbyr god komprimering. Fortsatt relevant for eldre nettlesere.
• EOT (Embedded Open Type): Spesielt designet for Internet Explorer. Generelt ikke nødvendig lenger, med mindre du absolutt må støtte veldig gamle versjoner av IE.
• TTF (TrueType Font) / OTF (OpenType Font): Eldre formater som generelt er større i størrelse og mindre optimalisert for webbruk. Unngå å bruke disse direkte når det er mulig.
• SVG Fonts: Et eldre format, som ikke brukes ofte i dag på grunn av nettleserstøtte og andre begrensninger.

Anbefaling: Bruk WOFF2 som ditt primære format, og tilby WOFF som en reserve for eldre nettlesere. Vurder EOT kun hvis du trenger å støtte veldig gamle versjoner av Internet Explorer.

Her er et eksempel på hvordan du kan tilby flere fontformater i @font-face-regelen din:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff'),
       url('mycustomfont.eot') format('embedded-opentype'); /* For eldre IE */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

Lastestrategier for fonter: Optimalisering for hastighet og brukeropplevelse

Måten du laster inn skrifttypene dine på kan ha betydelig innvirkning på nettstedets ytelse. Her er flere lastestrategier du kan benytte:

1. Grunnleggende font-lasting (standard atferd)

Som standard vil nettlesere vanligvis blokkere gjengivelsen av tekst til skrifttypen er lastet ned. Dette kan føre til en oppfattet ytelsesflaskehals, der brukere ser en blank skjerm eller usynlig tekst i en kort periode (ofte kalt en "flash of invisible text" eller FOIT).

Selv om den er enkel å implementere, er denne tilnærmingen generelt ikke anbefalt for en optimal brukeropplevelse.

2. Bruk av font-display-egenskapen

font-display-egenskapen gir mer kontroll over hvordan fonter lastes og vises. Den lar deg tilpasse atferden under font-lastingsprosessen, og gir en jevnere opplevelse for brukerne dine. Dette er den anbefalte tilnærmingen for de fleste situasjoner.

Her er de mulige verdiene for font-display:

• auto: Nettleseren bruker sin standardstrategi for font-lasting (vanligvis FOIT).
• block: Gir fonten en kort blokkeringsperiode og en uendelig bytteperiode. Nettleseren skjuler teksten i utgangspunktet, og viser den deretter når fonten er lastet. Hvis fonten ikke er lastet innen en kort periode (vanligvis 3 sekunder), vises reservefonten.
• swap: Gir fonten en null blokkeringsperiode og en uendelig bytteperiode. Nettleseren viser teksten umiddelbart ved hjelp av en reservefont. Når den egendefinerte fonten er lastet, byttes teksten til den egendefinerte fonten. Dette unngår FOIT, men kan resultere i en "flash of unstyled text" (FOUT).
• fallback: Gir fonten en veldig kort blokkeringsperiode og en kort bytteperiode. Dette er et kompromiss mellom block og swap. Nettleseren skjuler teksten i en veldig kort periode, og bytter deretter til reservefonten hvis den egendefinerte fonten ikke er lastet. Den fortsetter å bytte fonter i en kort periode, hvoretter den stopper og bare bruker reservefonten.
• optional: Gir fonten en ekstremt kort blokkeringsperiode og ingen bytteperiode. Nyttig for fonter som ikke er kritiske for den første gjengivelsen av siden (f.eks. fonter brukt i ikke-essensielle UI-elementer).

Anbefalinger:

• For de fleste scenarioer gir swap den beste balansen mellom oppfattet ytelse og visuell stabilitet. Brukere ser tekst umiddelbart, selv om den i utgangspunktet er stylet med en reservefont.
• Bruk fallback hvis du vil minimere FOUT, men fortsatt prioritere den egendefinerte fonten.
• Bruk optional for ikke-kritiske fonter for å forhindre unødvendig blokkering av sidens gjengivelse.

Eksempel på bruk av font-display: swap:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
            

              
                Copy
              
            
          

3. Forhåndslasting av fonter

Forhåndslasting av fonter kan forbedre ytelsen ved å instruere nettleseren til å laste ned skrifttypefilene så tidlig som mulig. Dette kan redusere forsinkelsen forbundet med font-lasting, noe som resulterer i en raskere oppfattet innlastingstid.

Bruk <link rel="preload">-taggen i <head>-delen av HTML-dokumentet ditt for å forhåndslaste fonter:

            <link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
            

              
                Copy
              
            
          

Forklaring:

• rel="preload": Spesifiserer at ressursen skal forhåndslastes.
• href: Spesifiserer URL-en til skrifttypefilen.
• as="font": Spesifiserer typen ressurs som forhåndslastes (i dette tilfellet, en font).
• type="font/woff2": Spesifiserer MIME-typen til skrifttypefilen.
• crossorigin: Nødvendig hvis fonten lastes fra en annen opprinnelse (f.eks. en CDN).

Forsiktig: Forhåndslasting av for mange ressurser kan påvirke ytelsen negativt. Forhåndslast kun fonter som er kritiske for den første gjengivelsen av siden.

4. Font Loading API (avansert)

Font Loading API gir et mer granulært kontrollnivå over font-lasting. Det lar deg oppdage når en font er lastet, spore lasteprogresjon og håndtere feil. Dette kan være nyttig for å implementere mer sofistikerte lastestrategier for fonter.

Eksempel (JavaScript):

            document.fonts.load('1em MyCustomFont').then(function() {
  // Fonten er lastet inn
  console.log('MyCustomFont lastet!');
});
            

              
                Copy
              
            
          

Font Loading API er mer komplekst å bruke enn font-display-egenskapen, men det gir større fleksibilitet for avanserte brukstilfeller.

Optimalisering av fontfiler: Redusere størrelse og forbedre ytelse

Optimalisering av skrifttypefilene dine er avgjørende for å forbedre nettstedets ytelse og redusere innlastingstider. Her er flere teknikker du kan bruke:

1. Font-subsetting

De fleste fonter inneholder et stort antall glyfer (tegn), hvorav mange kanskje ikke brukes på nettstedet ditt. Font-subsetting innebærer å fjerne ubrukte glyfer fra skrifttypefilen, noe som reduserer størrelsen betydelig. Dette er spesielt viktig når man støtter flere språk, da fonter kan inneholde glyfer for tegn som ikke brukes i en bestemt region.

Fordeler:

• Mindre størrelse på skrifttypefilen
• Raskere nedlastingstider
• Forbedret ytelse på nettstedet

Verktøy for font-subsetting:

• FontForge (Open Source): En kraftig skrivebordsbasert font-editor som lar deg manuelt subsette fonter.
• Glyphhanger (Command Line): Et kommandolinjeverktøy som identifiserer ubrukte glyfer og lager subsetter.
• Online Font Subsetting Tools: Flere online verktøy er tilgjengelige for å subsette fonter, som for eksempel Font Squirrel's Webfont Generator.

Unicode-range

For flerspråklige nettsteder kan CSS-deskriptoren unicode-range brukes til å spesifisere hvilke Unicode-tegnområder fonten skal brukes for. Dette gjør at nettleseren kun laster ned de nødvendige delene av fonten, noe som forbedrer ytelsen. Dette er spesielt nyttig når man håndterer språk med store tegnsett som kinesisk, japansk og koreansk (CJK).

Eksempel:

            @font-face {
  font-family: 'NotoSansCJK';
  src: url('NotoSansCJK-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, /* Vanlige CJK-ideogrammer */
                 U+3040-309F, /* Hiragana */
                 U+30A0-30FF;  /* Katakana */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

2. Komprimering

Sørg for at skrifttypefilene dine er riktig komprimert med Gzip eller Brotli. De fleste webservere støtter disse komprimeringsalgoritmene, som kan redusere størrelsen på skrifttypefilene betydelig under overføring.

Fordeler:

• Mindre filstørrelse under overføring
• Raskere nedlastingstider

3. Optimalisering av SVG-fonter

Hvis du bruker SVG-fonter (selv om det generelt ikke anbefales), optimaliser SVG-filene med verktøy som SVGO (SVG Optimizer) for å fjerne unødvendig metadata og redusere filstørrelsen.

4. Variable fonter

Variable fonter er en relativt ny font-teknologi som gjør at en enkelt skrifttypefil kan inneholde flere varianter av en skrifttype, som for eksempel forskjellige vekter, bredder og stiler. Dette kan redusere den totale filstørrelsen betydelig sammenlignet med å bruke separate skrifttypefiler for hver variasjon.

Fordeler:

• Mindre filstørrelser sammenlignet med tradisjonelle fontformater når man bruker flere varianter
• Større designfleksibilitet

5. Mellomlagring (Caching)

Konfigurer webserveren din til å mellomlagre skrifttypefiler riktig. Dette lar nettlesere lagre skrifttypefilene lokalt, noe som reduserer behovet for å laste dem ned gjentatte ganger ved senere besøk.

Fordeler:

• Raskere innlastingstider for returnerende besøkende
• Redusert serverbelastning

Hensyn til tilgjengelighet

Når du bruker egendefinerte fonter, er det viktig å ta hensyn til tilgjengelighet for å sikre at nettstedet ditt er brukbart for alle, inkludert personer med nedsatt funksjonsevne.

1. Tilstrekkelig kontrast

Sørg for at tekstfargen gir tilstrekkelig kontrast mot bakgrunnsfargen for å oppfylle WCAG-standardene (Web Content Accessibility Guidelines). Bruk et kontrastverktøy for å verifisere at kontrastforholdet er tilstrekkelig.

2. Lesbar skriftstørrelse

Bruk en skriftstørrelse som er stor nok til å være lett lesbar, spesielt for brukere med synshemming. Unngå å bruke overdrevent små skriftstørrelser.

3. Skriftvekt

Velg en skriftvekt som er lett lesbar. Unngå å bruke overdrevent tynne eller lette fonter, da de kan være vanskelige å lese for noen brukere.

4. Reservefonter (Fallback)

Oppgi passende reservefonter i CSS-reglene dine for å sikre at teksten fortsatt er lesbar selv om den egendefinerte fonten ikke klarer å laste. Velg reservefonter som ligner i stil og utseende på den egendefinerte fonten.

5. Endring av tekststørrelse

Sørg for at brukere enkelt kan endre størrelsen på teksten på nettstedet ditt ved hjelp av nettleserzoom eller andre tilgjengelighetsverktøy. Unngå å bruke faste størrelsesenheter (f.eks. piksler) for skriftstørrelser. Bruk relative enheter (f.eks. em, rem) i stedet.

6. Språkattributter

Sett lang-attributtet korrekt på <html>-taggen for å indikere språket på siden. Dette hjelper skjermlesere og andre hjelpeteknologier med å gjengi teksten riktig.

Eksempel:

            <html lang="no">
  <head>
    <title>Min nettside</title>
  </head>
  <body>
    <p>Dette er litt tekst på norsk.</p>
  </body>
</html>
            

              
                Copy
              
            
          

Nettleserkompatibilitet

Sørg for at de egendefinerte skrifttypene dine er kompatible med et bredt spekter av nettlesere. Test nettstedet ditt på forskjellige nettlesere og enheter for å identifisere eventuelle kompatibilitetsproblemer. Bruk verktøy som BrowserStack eller Sauce Labs for å teste nettstedet ditt på en rekke nettlesere og operativsystemer.

Vurder å bruke et CSS reset-stilark (f.eks. Normalize.css) for å normalisere standardstilene på tvers av forskjellige nettlesere.

Vanlige fallgruver å unngå

• Bruke for mange egendefinerte fonter: Bruk av for mange egendefinerte fonter kan påvirke ytelsen negativt og skape en rotete visuell opplevelse. Begrens antall egendefinerte fonter som brukes på nettstedet ditt til maksimalt to eller tre.
• Bruke store skrifttypefiler: Store skrifttypefiler kan øke innlastingstiden betydelig. Optimaliser skrifttypefilene dine ved hjelp av teknikkene beskrevet ovenfor.
• Unnlate å oppgi reservefonter: Å ikke oppgi reservefonter kan resultere i usynlig tekst hvis den egendefinerte fonten ikke klarer å laste.
• Ignorere hensyn til tilgjengelighet: Å ignorere hensyn til tilgjengelighet kan gjøre nettstedet ditt ubrukelig for personer med nedsatt funksjonsevne.
• Ikke teste på forskjellige nettlesere: Å ikke teste på forskjellige nettlesere kan føre til kompatibilitetsproblemer.
• Hotlinking av skrifttypefiler direkte fra designerens nettsted eller andre upålitelige kilder: Host kun fonter fra ditt eget nettsted, CDN eller en anerkjent font-tjeneste.

Beste praksis for global webtypografi

Når du designer nettsteder for et globalt publikum, er det viktig å vurdere følgende beste praksis for webtypografi:

• Velg fonter som støtter flere språk: Velg fonter som inkluderer glyfer for språkene du har tenkt å støtte på nettstedet ditt.
• Bruk passende skriftstørrelser for forskjellige språk: Skriftstørrelser som er egnet for ett språk, er kanskje ikke egnet for et annet. Juster skriftstørrelsene etter behov for å sikre lesbarhet på tvers av forskjellige språk.
• Vurder linjehøyde og tegnmellomrom: Linjehøyde og tegnmellomrom kan påvirke lesbarheten, spesielt for språk med komplekse tegnsett. Juster disse verdiene etter behov for å optimalisere lesbarheten.
• Bruk passende tekstjustering: Den passende tekstjusteringen kan variere avhengig av språket. For eksempel bruker venstre-til-høyre-språk vanligvis venstrejustering, mens høyre-til-venstre-språk vanligvis bruker høyrejustering.
• Test nettstedet ditt med forskjellige språk: Test nettstedet ditt med forskjellige språk for å sikre at typografien ser korrekt ut og er lett lesbar.

Eksempel: Bruke en font med global tegnstøtte

Vurder å bruke en font som Noto Sans, som er designet for å støtte et bredt spekter av språk og skriftsystemer. Google tilbyr Noto Sans og dens mange varianter (Noto Sans CJK, Noto Sans Arabic, etc.) som en gratis webfont.

Konklusjon

Å mestre CSS @font-face og implementere effektive strategier for font-lasting og optimalisering er avgjørende for å skape effektive og visuelt tiltalende nettsteder for et globalt publikum. Ved å forstå nyansene i fontformater, lasteteknikker og optimaliseringsmetoder kan du levere en sømløs og engasjerende brukeropplevelse som overskrider geografiske grenser og kulturelle forskjeller.

Ved å følge beste praksis som er skissert i denne guiden, kan du sikre at nettstedets typografi forbedrer den generelle designen, forbedrer ytelsen og gir en tilgjengelig opplevelse for alle brukere, uavhengig av deres plassering eller enhet.